<template>
  <div>
     <h1>轮播图练习</h1>
     <!-- 自己封装的轮播图组件 -->
     <swiper :items="myitems" :interval="3000"
     :autoplay="true" :swiperStyle='{width:"600px",height:"500px"}' @sendIndex="getIndex"
     ref="myswiper" :isShowTitle="true">
        <template #title>
          <div>
             <h1 style="color:red;">双11大促销</h1>
          </div>
        </template>
    
    </swiper>
      <button @click="goprev" style="color:red;font-size: 40px;">前一张</button>
       <button  @click="gonext" style="color:red;font-size: 40px;">后一张</button>
  </div>
</template>
<script>
import swiper from '@/components/swper.vue'
export default {
    components:{swiper},
    data(){
      return {
        catList:[], //存储返回猫咪数据
        myitems:[
          // vue2 自定义图片相对路径为数据时候
          // 使用require引入
          {id:"1",url:require('@/assets/1.png')},
          {id:"2",url:require('@/assets/2.png')},
          {id:"3",url:require('@/assets/3.png')},
          {id:"4",url:require('@/assets/4.png')},
        ]
      }
    },
    created(){
      this.getCats()//进入组件就获取猫咪数据
    },
    methods:{
      goprev(){
      //  获取子组件 调用子组件下一页方法
       this.$refs.myswiper.toprev();
      },
      gonext(){
           //  获取子组件 调用子组件下一页方法
          this.$refs.myswiper.tonext();
      },
      getIndex(index){ 
        // 获取子组件传来的下标
        console.log(index,"子传父的数据")

      },
      getCats(){ //小猫数据
        this.$axios({
          url:"https://api.thecatapi.com/v1/images/search?size=med&mime_types=jpg&format=json&has_breeds=true&order=RANDOM&page=0&limit=10",
          method:"get"
        }).then(res=>{
          console.log(res.data,"小猫数据")
          this.catList=res.data;
        })
      }
    }
}
</script>